﻿<!DOCTYPE html>
<html lang="en" class="bg-white" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{../../assets/libs/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{../../assets/module/admin.css?v=311}"/>
    <link rel="stylesheet" href="../../assets/module/formSelects/formSelects-v4.css"/>
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button id="btnAdd" class="layui-btn icon-btn" ><i class="layui-icon">&#xe654;</i>添加用户</button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="tableState">
    <input type="checkbox" lay-filter="ckState" value="{{d.userId}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="modelUser">
    <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form layui-form-pane" >
        <div class="layui-form-item">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-block">
                <input type="text" name="nick" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号:</label>
            <div class="layui-input-block">
                <input type="text" name="sys_user" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-block">
                <input type="text" name="sys_pwd" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addUser">立即提交</button>
            </div>
        </div>
    </form>
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=311"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'formSelects'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var formSelects = layui.formSelects;
        var arr=[
            {type: 'numbers',title:'序号'},
            {field: 'sys_user', title: '账号'},
            {field: 'sys_nick', title: '用户名'},
            {
                templet: function (d) {
                    return util.toDateString(d.sys_create_time);
                }, title: '创建时间'
            },
            {templet: '#tableState', title: '状态'},
            {align: 'center',templet: function (d) {
                  if (d.id==1){
                      return "*";
                  }else {
                      return '<a class="layui-btn layui-btn-xs layui-btn-primary"  lay-event="addRole">绑定角色</a>' +
                          '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除账号</a>';

                  };
                },
                title: '操作', minWidth: 200}
        ];
        // 渲染表格
        var insTb = table.render({
            elem: '#userTable',
            url: '/user/getAll',
            page: true,
            cellMinWidth: 100,
            cols: [arr]
            ,response: {
                  statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
              }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
            if (res.total>0){
                return {
                    "code": 0, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.list //解析数据列表
                };
            }
        }
        });
        // 添加

        // 搜索
        $('#btnSearch').click(function () {
            var key = $('#sltKey').val();
            var value = $('#edtSearch').val();
            if (value && !key) {
                layer.msg('请选择搜索条件', {icon: 2});
            }
            insTb.reload({where: {searchKey: key, searchValue: value}});
        });
       var  RoleId=0;
        // 工具条点击事件
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'addRole') { // 查看
                checkRole(parseInt(data.id))
            }
            if (layEvent === 'delete') { // 查看
                layer.confirm('确定删除该用户吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    deleteUser(parseInt(data.id))
                }, function(){
                    layer.msg('已取消', {icon: 1});
                });

            }
        });
        $("#btnAdd").click(function () {
            layer.open({
                type: 1,
                title:"添加用户~",
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '300px'], //宽高
                content:$("#modelUser").html()
            });
            form.render();
        });
        function  deleteUser(index) {
            $.ajax({
                url : "/user/deleteUserById",
                type : "POST",
                dataType : 'JSON',
                data : {id:index},
                success : function(res) {
                 if (res.code==0){
                     layer.msg("删除成功！",{icon:1});
                     setTimeout(function () {
                         window.location.reload();
                     },1500)
                 }
                 table.render();
                }
        })
        }
        function  getRoelName(role_id) {
            switch (role_id) {
                case 1:
                    return "管理员";
                case 2:
                    return "项目员";
                case 3:
                    return "录入员";
            }
        }
        function checkRole(role_id) {
            localStorage.setItem("user_id",role_id);
            $.ajax({
                url : "/sys/userRole/checkRoleById",
                type : "POST",
                dataType : 'JSON',
                data : {user_id:role_id},
                success : function(res) {
                    if (res.code==-1) {
                        layer.open({
                            type: 1,
                            title:"请选择绑定角色名称",
                            skin: 'layui-layer-rim', //加上边框
                            area: ['420px', '200px'], //宽高
                            content:'<div style="margin-top: 20px" class="layui-form">' +
                                '  <div class="layui-form-item">\n' +
                                '    <label class="layui-form-label">选择角色:</label>\n' +
                                '    <div class="layui-input-block">\n' +
                                '      <input type="radio" name="sex" value="1" title="管理员">\n' +
                                '      <input type="radio" name="sex" value="2" title="项目员" >\n' +
                                '      <input type="radio" name="sex" value="3" title="录入员" >\n' +
                                '    </div>\n' +
                                '  </div>' +
                                ' <div class="layui-form-item">\n' +
                                '    <div class="layui-input-block">\n' +
                                '      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +
                                '    </div>\n' +
                                '  </div>' +
                                '</div>'
                        });
                        form.render();
                    }
                    if (res.code==0){
                        RoleId=res.data[0].role_id;
                        layer.msg("已绑定角色:"+getRoelName(RoleId),{icon:5})
                    }
                }
            });
        }
        form.on('submit(addUser)', function(data){
            addUser(data.field.sys_user,data.field.sys_pwd,data.field.nick)
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('submit(formDemo)', function(data){
            var userid=localStorage.getItem("user_id");
            var roleid=data.field.sex;
            layer.confirm('确认绑定:'+getRoelName(parseInt(roleid))+"吗？", {
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.msg('绑定中...', {icon: 1});
                addRole(parseInt(userid),roleid)
            }, function(){
                layer.msg('已取消', {icon: 1});
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        function  addRole(userid,roleid) {
            $.ajax({
                url : "/sys/userRole/addRole",
                type : "POST",
                dataType : 'JSON',
                data : {user_id:userid,role_id:roleid},
                success : function(res) {
                   if (res.code==0){
                       layer.msg("绑定角色成功!",{icon:6});
                       setTimeout(function () {
                           layer.closeAll();
                       },1500)
                   }
                }
            });
        }
        function  addUser(user,pwd,nick) {
            $.ajax({
                url : "/user/addUser",
                type : "POST",
                dataType : 'JSON',
                data : {sys_user:user,sys_password:pwd,sys_nick:nick},
                success : function(res) {
                    if (res.code==0){
                        layer.msg("添加成功！",{icon:6});
                        setTimeout(function () {
                            window.location.reload();
                        },1500)
                    }
                }
            });
        }
    });
</script>

</body>
</html>